<script setup lang="ts">
import '../../assets/icon/iconfont.js';

import { ref } from 'vue'

const searchTerm = ref<string>('')

const emit = defineEmits(['search'])
const search = (val: string) => {
  emit('search', val)
}


// 滚动到下一个部分的函数
const scrollToNextSection = () => {
  const windowHeight = window.innerHeight;
  window.scrollTo({
    top: windowHeight,
    behavior: 'smooth'
  });
};
</script>

<template>
  <div class="w-full bg-linear-to-t from-purple-800 to-slate-800 text-white mb-10 " >
    <main class="min-h-screen flex justify-center items-center w-full relative">
      <!-- 搜索区域 -->
      <div class="relative inline-block w-lg">

        <div class="absolute inset-0 rounded-full overflow-hidden">
          <div
            class="absolute inset-0 bg-[conic-gradient(from_var(--shimmer-angle),theme(colors.slate.950)_0%,theme(colors.slate.100)_10%,theme(colors.slate.950)_20%)] animate-[shimmer_2.5s_linear_infinite]">
          </div>
          <div class="absolute inset-[2px] rounded-full bg-black"></div>
        </div>
        <div class="flex flex-row items-center w-full">
          <input disabled type="text" placeholder="来看看我这里有没有你想了解哒？"
            v-model="searchTerm"
            @keyup.enter="search(searchTerm)"
            class="basis-4/5 relative z-10 rounded-full pl-12 py-6 text-2xl font-bold focus:outline-none bg-transparent text-white placeholder-white/70" />
          <svg class="icon--large relative z-10 basis-1/5" aria-hidden="true" @click="search(searchTerm)">
            <use xlink:href="#icon-icon-sousuo"></use>
          </svg>
        </div>
      </div>
      <!-- 向下滚动按钮 -->
      <button @click="scrollToNextSection"
        class="absolute z-99 bottom-30 left-1/2 -translate-x-1/2 flex flex-col items-center text-white/70 hover:text-white transition-all duration-300 group">
        <svg class="icon--xl  animate-bounce text-current" color="white" aria-hidden="true">
          <use xlink:href="#icon-xiala"></use>
        </svg>
      </button>

      <!-- 动态波浪效果 -->
      <!-- 底部波浪区域 -->
      <div class="absolute bottom-0 left-0 w-full h-[50px] bg-[#F5F5F5]">
        <div class="absolute bottom-full left-0 w-full h-[150px] overflow-hidden">
          <svg class="absolute bottom-0 left-0 w-[400%] h-[150px] wave-animation-1" viewBox="0 0 4800 150" preserveAspectRatio="none">
            <path d="M0,75 C300,0 600,150 900,75 C1200,0 1500,150 1800,75 C2100,0 2400,150 2700,75 C3000,0 3300,150 3600,75 C3900,0 4200,150 4500,75 C4650,75 4800,75 4800,75 L4800,150 L0,150 Z" 
                  fill="url(#waveGradient1)" opacity="0.8"/>
            <defs>
              <linearGradient id="waveGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#F5F5F5" stop-opacity="0.2"/>
                <stop offset="100%" stop-color="#F5F5F5" stop-opacity="1"/>
              </linearGradient>
            </defs>
          </svg>
          <svg class="absolute bottom-0 left-0 w-[400%] h-[110px] wave-animation-3" viewBox="0 0 4800 110" preserveAspectRatio="none">
            <path d="M0,55 C200,0 400,110 600,55 C800,0 1000,110 1200,55 C1400,0 1600,110 1800,55 C2000,0 2200,110 2400,55 C2600,0 2800,110 3000,55 C3200,0 3400,110 3600,55 C3800,0 4000,110 4200,55 C4400,0 4600,110 4800,55 L4800,110 L0,110 Z" 
                  fill="url(#waveGradient3)" opacity="0.4"/>
            <defs>
              <linearGradient id="waveGradient3" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#F5F5F5" stop-opacity="0.1"/>
                <stop offset="100%" stop-color="#F5F5F5" stop-opacity="1"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>

    </main>
  </div>
</template>

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.icon--large {
  width: 2em;
  height: 2em;
}
.icon--xl {
  width: 3em;
  height: 3em;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

@keyframes wave1 {
  0% { 
    transform: translateX(0) translateY(0);
  }
  25% { 
    transform: translateX(-12.5%);
  }
  50% { 
    transform: translateX(-25%) translateY(0);
  }
  75% { 
    transform: translateX(-37.5%) ;
  }
  100% { 
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes wave3 {
  0% { 
    transform: translateX(0) translateY(0);
  }
  16.66% { 
    transform: translateX(-8.33%) ;
  }
  33.33% { 
    transform: translateX(-16.66%) translateY(0);
  }
  50% { 
    transform: translateX(-25%);
  }
  66.66% { 
    transform: translateX(-33.33%) translateY(0);
  }
  83.33% { 
    transform: translateX(-41.66%);
  }
  100% { 
    transform: translateX(-50%) translateY(0);
  }
}

/* 波浪动画 */
.wave-animation-1 {
  animation: wave1 50s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}


.wave-animation-3 {
  animation: wave3 30s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  animation-delay: 0s;
}

</style>
